<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 引入vue -->
  <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
<!--   
  事件的基本使用
  1.v-on:xxx @xxx 绑定事件 ，xxx是事件名
  2.事件的回调需要配置在methods对象中，最终会在vm上
  3.methods中配置的函数，都是被Vue所管理的函数，this的指向是vm或组件实例对象
  4.@click="demo" 和 @click="demo($(event))" 效果一致，但后者可以传参
 -->
  <div id="root">
    <h1>你好，{{name}}</h1>
    <button v-on:click="showInfo1">点击显示信息1（不传参）</button>
    <button @click="showInfo2(66,$event)">点击显示信息2（传参）</button>
  </div>
  <script type="text/javascript">
    Vue.config.productionTip = false //阻止 vue 在启动时生成生产提示。、
    function showInfo() {
      alert('你好')
    }
    const vm = new Vue({
      el: '#root',
      data: {
        name: '尚硅谷'
      },
      methods: {
        showInfo1(e) {
          console.log(e.target.innerText);
          console.log(this)//this是vm
          alert('你好')
        },
        showInfo2(num,event) {
          console.log(num,event)
          console.log(event.target.innerText);
          console.log(this)//this是vm
          alert('你好!!')
        }
      }
    })
  </script>
</body>

</html>